<template>
  <div class="boss-login-container" :style="backgroundStyle">
    <!-- 动态粒子背景 -->
    <div class="particles" ref="particles"></div>

    <!-- 主内容容器 -->
    <div class="main-content">
      <!-- 轮播图部分 -->
      <div class="carousel-container">
        <div class="carousel-controls">
          <button class="carousel-prev" @click="prevImage">
            <i class="fas fa-chevron-left"></i>
          </button>
          <button class="carousel-next" @click="nextImage">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
        <div class="carousel" :style="carouselStyle">
          <div class="carousel-item" v-for="(image, index) in carouselImages" :key="index">
            <img :src="image" :alt="'轮播图' + (index + 1)">
          </div>
        </div>
        <div class="carousel-dots">
          <span
            v-for="(dot, index) in carouselImages.length"
            :key="index"
            :class="{ 'active': currentImageIndex === index }"
            @click="goToImage(index)"
          ></span>
        </div>
      </div>

      <!-- 3D浮动登录窗口 -->
      <div class="login-wrapper" :style="loginWrapperStyle">
        <div class="login-box" :class="{ 'floating': !isMobile }">
          <!-- 动态渐变标题栏 -->
          <div class="login-header">
            <div class="logo-shine"></div>
            <h2>BOSS 直聘</h2>
            <div class="login-subtitle">找工作 上BOSS直聘直接谈</div>
            <div class="header-wave"></div>
          </div>

          <div class="login-content">
            <form @submit.prevent="handleLogin">
              <!-- 流光输入框 -->
              <div class="form-group phone-input" @mouseenter="playInputEffect($event)">
                <div class="phone-prefix">+86 <span class="arrow">▼</span></div>
                <input
                  type="tel"
                  v-model="phone"
                  placeholder="手机号"
                  required
                  @focus="playInputFocus($event)"
                >
                <div class="input-highlight"></div>
              </div>
              <div class="form-group captcha-input" v-if="captchaImg">
                <input
                  type="text"
                  v-model="icode"
                  placeholder="请输入验证码"
                  required
                  @focus="playInputFocus($event)"
                >
                <div class="input-highlight"></div>
                <img :src="captchaImg" alt="验证码" @click="refreshCaptcha" class="captcha-img" :style="{ display: captchaImg ? 'block' : 'none' }">
              </div>
              <!-- 动态验证码输入 -->
              <div class="form-group code-input" @mouseenter="playInputEffect($event)">
                <input
                  type="text"
                  v-model="code"
                  placeholder="短信验证码"
                  required
                  @focus="playInputFocus($event)"
                >
                 <div class="input-highlight"></div>
                <button
                  type="button"
                  class="send-code-btn"
                  @click="sendCode"
                  :disabled="countdown > 0 || isLoading"
                  :class="{ 'pulse': countdown === 0 && !isLoading }"
                >
                  <span v-if="countdown <= 0 && !isLoading">获取验证码</span>
                  <span v-else-if="isLoading">加载中...</span>
                  <span v-else class="countdown">{{ countdown }}s</span>
                  <span class="send-effect" v-if="showSendEffect">✓</span>
                </button>
              </div>

              <!-- 霓虹登录按钮 -->
              <button type="submit" class="login-btn" :disabled="isLoading">
                <span class="btn-text">{{ isLoading ? '登录中...' : '登录/注册' }}</span>
                <span class="btn-shine"></span>
                <span class="btn-particles"></span>
              </button>
            </form>
            
            <!-- 炫彩分隔线 -->
            <div class="other-login">
              <div class="divider">
                <span class="divider-text">或</span>
                <div class="divider-line left"></div>
                <div class="divider-line right"></div>
              </div>

              <!-- 第三方登录按钮组 -->
              <div class="third-party-login">
                <!-- 旋转钉钉按钮 -->
                <button class="dingtalk-login-btn" @click="handleDingtalkLogin" :disabled="isLoading">
                  <div class="third-party-spinner">
                    <img :src="dingtalkImage" alt="钉钉登录" class="third-party-image">
                  </div>
                  <span class="third-party-text">钉钉</span>
                </button>

                <!-- 旋转Git按钮 -->
                <button class="git-login-btn" @click="handleGitLogin" :disabled="isLoading">
                  <div class="third-party-spinner">
                    <img :src="gitImage" alt="Git登录" class="third-party-image">
                  </div>
                  <span class="third-party-text">Git</span>
                </button>

                <!-- 旋转QQ按钮 -->
                <button class="qq-login-btn" @click="handleQqLogin" :disabled="isLoading">
                  <div class="third-party-spinner">
                    <img :src="qqImage" alt="QQ登录" class="third-party-image">
                  </div>
                  <span class="third-party-text">QQ</span>
                </button>
              </div>
            </div>
          </div>

          <!-- 动态底部 -->
          <div class="login-footer">
            <div class="checkbox-group">
              <label class="checkbox-container">
                <input type="checkbox" id="agree" v-model="agreed">
                <span class="checkmark"></span>
                <span class="checkbox-text">
                  已阅读并同意BOSS直聘《用户协议》《隐私政策》
                </span>
              </label>
            </div>
            <div class="footer-wave"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景装饰元素 -->
    <div class="decor decor-1"></div>
    <div class="decor decor-2"></div>
    <div class="decor decor-3"></div>

    <!-- 角色选择弹窗 -->
    <div class="role-selection-modal" v-if="showRoleSelection">
      <div class="role-selection-content">
        <h3>请选择您的角色</h3>
        <div class="role-list">
          <div
            class="role-item"
            v-for="role in roles"
            :key="role.id"
            :class="{ 'selected': selectedRole === role.id }"
            @click="selectRole(role.id)"
          >
            <div class="role-icon">{{ role.name.charAt(0) }}</div>
            <div class="role-name">{{ role.name }}</div>
          </div>
        </div>
        <div class="modal-buttons">
          <button class="cancel-btn" @click="showRoleSelection = false">取消</button>
          <button class="confirm-btn" @click="handleRegister" :disabled="!selectedRole || isLoading">
            {{ isLoading ? '注册中...' : '确认注册' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import backgroundImage from './img/boss.png'
import dingtalkImage from './img/xdd.png'
import gitImage from './img/git.jpg'
import qqImage from './img/qq.jpg'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid'
import sessionManager from '@/utils/session.js'

const route = useRoute()
const router = useRouter()

// 导入轮播图图片
import lun1 from './img/lun1.jpg'
import lun2 from './img/lun2.jpg'
import lun3 from './img/lun3.jpg'
import lun4 from './img/lun4.jpg'

const phone = ref('')
const code = ref('')
const icode = ref('')
const agreed = ref(false)
const countdown = ref(0)
const showSendEffect = ref(false)
const isMobile = ref(false)
const windowSize = ref({ width: window.innerWidth, height: window.innerHeight })
const isLoading = ref(false)
const captchaKey = ref('')
const captchaImg = ref('')
const imageUrlObject = ref(null)

// 新增状态变量
const showRoleSelection = ref(false)
const roles = ref([])
const selectedRole = ref(null)

// 轮播图相关
const carouselImages = ref([lun1, lun2, lun3, lun4])
const currentImageIndex = ref(0)
let carouselInterval = null
let isCarouselPaused = ref(false)

// 粒子系统
let particles = []
const particlesRef = ref(null)

// 背景图样式
const backgroundStyle = computed(() => ({
  backgroundImage: `linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(${backgroundImage})`,
}))

// 轮播图样式
const carouselStyle = computed(() => ({
  transform: `translateX(-${currentImageIndex.value * 100}%)`,
  transition: `transform 0.8s ease-in-out, opacity 0.5s ease`
}))

// 自动轮播
const startCarousel = () => {
  if (carouselInterval) clearInterval(carouselInterval)
  carouselInterval = setInterval(() => {
    if (!isCarouselPaused.value) {
      nextImage()
    }
  }, 5000)
}

// 上一张图片
const prevImage = () => {
  currentImageIndex.value = (currentImageIndex.value - 1 + carouselImages.value.length) % carouselImages.value.length
  resetCarousel()
}

// 下一张图片
const nextImage = () => {
  currentImageIndex.value = (currentImageIndex.value + 1) % carouselImages.value.length
  resetCarousel()
}

// 跳转到指定图片
const goToImage = (index) => {
  currentImageIndex.value = index
  resetCarousel()
}

// 重置轮播计时器
const resetCarousel = () => {
  clearInterval(carouselInterval)
  startCarousel()
}

// 初始化粒子系统
const initParticles = () => {
  const container = particlesRef.value
  if (!container) return

  const particleCount = isMobile.value ? 30 : 80

  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div')
    particle.className = 'particle'

    // 随机属性
    const size = Math.random() * 6 + 2
    const posX = Math.random() * 100
    const posY = Math.random() * 100
    const delay = Math.random() * 5
    const duration = Math.random() * 10 + 10
    const color = `hsl(${Math.random() * 60 + 200}, 80%, 60%)`

    Object.assign(particle.style, {
      width: `${size}px`,
      height: `${size}px`,
      left: `${posX}%`,
      top: `${posY}%`,
      background: color,
      animationDelay: `${delay}s`,
      animationDuration: `${duration}s`
    })

    container.appendChild(particle)
    particles.push(particle)
  }
}

// 清除粒子
const clearParticles = () => {
  if (!particles || !Array.isArray(particles)) return;
  particles.forEach(p => {
    if (p.parentNode) {
      p.parentNode.removeChild(p)
    }
  })
  particles = []
}

// 输入框动画效果
const playInputEffect = (event) => {
  const inputGroup = event.currentTarget
  const highlight = inputGroup.querySelector('.input-highlight')
  if (highlight) {
    highlight.style.transform = 'scaleX(1)'
    setTimeout(() => {
      highlight.style.transform = 'scaleX(0)'
    }, 1000)
  }
}

// 输入框聚焦效果
const playInputFocus = (event) => {
  const input = event.target
  const inputGroup = input.closest('.form-group')
  const highlight = inputGroup.querySelector('.input-highlight')
  if (highlight) {
    highlight.style.transform = 'scaleX(1)'
    highlight.style.opacity = '0.8'
    highlight.style.background = 'linear-gradient(90deg, #4a90e2, #5aa5f8)'
  }
}

// 生成UUID
const generateUUID = () => {
  return uuidv4()
}

// 获取图片验证码
const getCaptcha = async () => {
  try {
    // 释放之前的URL对象
    if (imageUrlObject.value) {
      URL.revokeObjectURL(imageUrlObject.value)
      imageUrlObject.value = null
    }

    captchaKey.value = generateUUID()
    const response = await axios.get('http://127.0.0.1:8000/user/captcha/', {
      params: { captcha_key: captchaKey.value },
      responseType: 'blob'
    })

    if (response.data && response.data.type && response.data.type.includes('image')) {
      const newUrl = URL.createObjectURL(response.data)
      imageUrlObject.value = newUrl
      captchaImg.value = newUrl
    } else {
      console.error('无效的图片响应:', response.data)
      captchaImg.value = ''
      throw new Error('无效的图片响应')
    }
  } catch (error) {
    console.error('获取验证码失败:', error)
    captchaImg.value = ''
  }
}

// 刷新验证码
const refreshCaptcha = () => {
  getCaptcha()
}

// 发送验证码
const sendCode = async () => {
  if (countdown.value > 0 || isLoading.value) return
  if (!phone.value) {
    const input = document.querySelector('.phone-input input')
    input.classList.add('shake')
    setTimeout(() => input.classList.remove('shake'), 500)
    return
  }
  if (!icode.value) {
    const input = document.querySelector('.captcha-input input')
    input.classList.add('shake')
    setTimeout(() => input.classList.remove('shake'), 500)
    return
  }

  isLoading.value = true

  try {
    const response = await axios.post('http://127.0.0.1:8000/user/sendcode/', {
      phone: phone.value,
      captcha_key: captchaKey.value,
      icode: icode.value
    })

    if (response.data.code === 200) {
      showSendEffect.value = true
      countdown.value = 60
      const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    } else {
      alert(response.data.msg || '发送验证码失败')
    }
  } catch (error) {
    console.error('发送验证码请求出错:', error)
    alert('发送验证码失败，请稍后再试')
  } finally {
    isLoading.value = false
    setTimeout(() => showSendEffect.value = false, 1000)
  }
}

// 处理登录
const handleLogin = async () => {
  if (!agreed.value) {
    const checkbox = document.querySelector('.checkbox-container')
    checkbox.classList.add('bounce')
    setTimeout(() => checkbox.classList.remove('bounce'), 1000)
    return
  }
  if (!phone.value || !code.value) {
    alert('请填写手机号和验证码')
    return
  }

  isLoading.value = true

  try {
    const response = await axios.post('http://127.0.0.1:8000/user/loginByCode/', {
      phone: phone.value,
      code: code.value
    })

    if (response.data.code === 200) {
      // 登录成功处理
      handleLoginSuccess(response.data.data)
    } else if (response.data.code === 400) {
      // 用户不存在，显示角色选择
      showRoleSelection.value = true
      // 获取角色列表
      await getRoles()
    } else {
      alert(response.data.msg || '登录失败')
    }
  } catch (error) {
    console.error('登录请求出错:', error)
    if (error.response && error.response.data) {
      alert(error.response.data.msg || '登录失败，请稍后再试')
    } else {
      alert('登录失败，请检查网络连接后重试')
    }
  } finally {
    isLoading.value = false
  }
}

// 获取角色列表
const getRoles = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/user/roles/')
    if (response.data.code === 200) {
      roles.value = response.data.data
    } else {
      alert(response.data.msg || '获取角色列表失败')
    }
  } catch (error) {
    console.error('获取角色列表失败:', error)
    alert('获取角色列表失败，请稍后再试')
  }
}

// 选择角色
const selectRole = (roleId) => {
  selectedRole.value = roleId
  // 这里可以添加调用roles接口的逻辑
  // 例如：updateRole(roleId)
}

// 处理注册
const handleRegister = async () => {
  if (!selectedRole.value) {
    alert('请选择角色')
    return
  }

  isLoading.value = true

  try {
    // 先调用roles接口更新角色
    const roleResponse = await axios.get('http://127.0.0.1:8000/user/roles/', {
      params: {
        role_id: selectedRole.value,
        phone: phone.value
      }
    })

    if (roleResponse.data.code !== 200) {
      throw new Error(roleResponse.data.msg || '角色更新失败')
    }

    // 然后进行注册
    const response = await axios.post('http://127.0.0.1:8000/user/register/', {
      phone: phone.value,
      code: code.value,
      role: selectedRole.value
    })

    if (response.data.code === 200) {
      // 注册成功处理
      handleLoginSuccess(response.data.data)
      showRoleSelection.value = false // 关闭弹窗
    } else {
      alert(response.data.msg || '注册失败')
    }
  } catch (error) {
    console.error('注册请求出错:', error)
    if (error.response && error.response.data) {
      alert(error.response.data.msg || '注册失败，请稍后再试')
    } else {
      alert('注册失败，请检查网络连接后重试')
    }
  } finally {
    isLoading.value = false
  }
}

// 登录/注册成功后的处理
const handleLoginSuccess = (data) => {
  // 保存token和用户信息到localStorage
  localStorage.setItem('token', data.token)
  localStorage.setItem('retoken', data.retoken)
  localStorage.setItem('userid', data.userid)
  localStorage.setItem('access_token', data.access_token)

  // 创建会话并跳转到首页（不传递敏感信息）
  createSessionAndRedirect(data.userid)
}

// 创建会话并重定向
const createSessionAndRedirect = async (userId) => {
  try {
    // 使用会话管理工具创建会话
    const result = await sessionManager.createSession(userId)
    
    if (result.success) {
      // 跳转到首页，只传递会话ID
      router.push('/home?session=' + result.sessionId)
    } else {
      // 如果创建会话失败，回退到原来的方式
      console.error('创建会话失败:', result.error)
      router.push('/relaystation/?id=' + userId)
    }
  } catch (error) {
    console.error('创建会话失败:', error)
    // 如果创建会话失败，回退到原来的方式
    router.push('/relaystation/?id=' + userId)
  }
}

// 钉钉登录
const handleDingtalkLogin = async () => {
  if (!agreed.value) {
    const checkbox = document.querySelector('.checkbox-container')
    checkbox.classList.add('bounce')
    setTimeout(() => checkbox.classList.remove('bounce'), 1000)
    return
  }
  console.log('跳转钉钉登录')
  try {
    const response = await axios.get('http://localhost:8000/user/dd_getUrl/')
    if (response.status === 200) {
      window.location.href = response.data.url
    } else {
      alert('获取钉钉登录URL失败')
    }
  } catch (error) {
    alert('请求钉钉登录URL接口出错')
    console.error(error)
  }
}

// Git登录
const handleGitLogin = async () => {
  if (!agreed.value) {
    const checkbox = document.querySelector('.checkbox-container')
    checkbox.classList.add('bounce')
    setTimeout(() => checkbox.classList.remove('bounce'), 1000)
    return
  }
  console.log('跳转Git登录')
  try {
    const response = await axios.get('http://localhost:8000/user/git_getUrl/')
    if (response.status === 200) {
      window.location.href = response.data.url
    } else {
      alert('获取Git登录URL失败')
    }
  } catch (error) {
    alert('请求Git登录URL接口出错')
    console.error(error)
  }
}

// QQ登录
const handleQqLogin = () => {
  if (!agreed.value) {
    const checkbox = document.querySelector('.checkbox-container')
    checkbox.classList.add('bounce')
    setTimeout(() => checkbox.classList.remove('bounce'), 1000)
    return
  }
  router.push({ path: '/QqLogin' })
}

const queryCode = route.query.code

const ddcallback = () => {
  axios.post('http://localhost:8000/user/dd_callback/', { "code": queryCode }).then(res => {
    if (res.data.code == 200) {
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('retoken', res.data.retoken)
      localStorage.setItem('userid', res.data.userid)
      localStorage.setItem('access_token', res.data.access_token)
      if (res.data.mlist) {
        localStorage.setItem('mlist', JSON.stringify(res.data.mlist))
      }
      alert('登录成功')
      // 使用新的会话方式重定向
      createSessionAndRedirect(res.data.userid)
    } else {
      alert(res.data.msg || '钉钉登录失败')
      router.replace({ path: '/' })
    }
  }).catch(() => {
    alert('钉钉登录接口异常')
    router.replace({ path: '/' })
  })
}

// Git登录回调处理
const gitcallback = () => {
  const queryCode = route.query.code
  if (queryCode && !localStorage.getItem('token')) {
    axios.post('http://localhost:8000/user/git_callback/', { "code": queryCode }).then(res => {
      if (res.data.code == 200) {
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('retoken', res.data.retoken)
        localStorage.setItem('userid', res.data.userid)
        localStorage.setItem('access_token', res.data.access_token)
        if (res.data.mlist) {
          localStorage.setItem('mlist', JSON.stringify(res.data.mlist))
        }
        alert('登录成功')
        // 使用新的会话方式重定向
        createSessionAndRedirect(res.data.userid)
      } else {
        alert(res.data.msg || 'Git登录失败')
        router.replace({ path: '/' })
      }
    }).catch(() => {
      alert('Git登录接口异常')
      router.replace({ path: '/' })
    })
  }
}

// QQ登录回调处理
const qqcallback = () => {
  const queryCode = route.query.code
  if (queryCode && !localStorage.getItem('token')) {
    axios.post('http://localhost:8000/user/qq_callback/', { "code": queryCode }).then(res => {
      if (res.data.code == 200) {
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('retoken', res.data.retoken)
        localStorage.setItem('userid', res.data.userid)
        localStorage.setItem('access_token', res.data.access_token)
        if (res.data.mlist) {
          localStorage.setItem('mlist', JSON.stringify(res.data.mlist))
        }
        alert('登录成功')
        // 使用新的会话方式重定向
        createSessionAndRedirect(res.data.userid)
      } else {
        alert(res.data.msg || 'QQ登录失败')
        router.replace({ path: '/' })
      }
    }).catch(() => {
      alert('QQ登录接口异常')
      router.replace({ path: '/' })
    })
  }
}

// 检测设备类型
const checkDevice = () => {
  isMobile.value = window.innerWidth <= 768
}

// 窗口大小变化处理
const handleResize = () => {
  windowSize.value = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  checkDevice()
  clearParticles()
  initParticles()
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  checkDevice()
  initParticles()
  startCarousel()

  const carouselContainer = document.querySelector('.carousel-container')
  if (carouselContainer) {
    carouselContainer.addEventListener('mouseenter', () => {
      isCarouselPaused.value = true
    })

    carouselContainer.addEventListener('mouseleave', () => {
      isCarouselPaused.value = false
      startCarousel()
    })
  }

  // 钉钉登录
  if (queryCode && !localStorage.getItem('token')) {
    ddcallback()
  }

  // Git登录
  gitcallback()

  // QQ登录
  qqcallback()

  // 初始化获取验证码
  getCaptcha()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  const carouselContainer = document.querySelector('.carousel-container')
  if (carouselContainer) {
    carouselContainer.removeEventListener('mouseenter', () => {
      isCarouselPaused.value = true
    })

    carouselContainer.removeEventListener('mouseleave', () => {
      isCarouselPaused.value = false
    })
  }
  clearParticles()
  clearInterval(carouselInterval)

  // 释放URL对象
  if (imageUrlObject.value) {
    URL.revokeObjectURL(imageUrlObject.value)
    imageUrlObject.value = null
  }
})
</script>

<style scoped>
/* 基础样式 */
.boss-login-container {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

/* 主内容容器 */
.main-content {
  display: flex;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* 轮播图容器 */
.carousel-container {
  flex: 1;
  margin-right: 40px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 800px;
  perspective: 1000px;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
  position: relative;
}

.carousel-item {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
}

/* 轮播图控制按钮 */
.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-prev, .carousel-next {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.carousel-prev:hover, .carousel-next:hover {
  background: rgba(74, 144, 226, 0.8);
  transform: translateY(-3px);
}

.carousel-prev:active, .carousel-next:active {
  transform: translateY(0);
}

/* 轮播图指示点 */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.carousel-dots span.active {
  background: white;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.5);
}

.carousel-dots span:hover:not(.active) {
  background: white;
  transform: scale(1.1);
}

/* 粒子背景 */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  animation: floatParticle linear infinite;
  filter: blur(1px);
}

@keyframes floatParticle {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-100vh) translateX(20px);
    opacity: 0;
  }
}

/* 登录框容器 */
.login-wrapper {
  position: relative;
  z-index: 100;
  width: 500px;
  max-width: 100%;
  perspective: 1000px;
  margin-top: 160px
}

/* 3D登录框 */
.login-box {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-box.floating {
  animation: floating3D 8s ease-in-out infinite;
}

@keyframes floating3D {
  0%, 100% {
    transform: translateY(0) rotateX(1deg) rotateY(-1deg);
  }
  50% {
    transform: translateY(-20px) rotateX(-1deg) rotateY(1deg);
  }
}

/* 标题栏 */
.login-header {
  padding: 30px 24px 20px;
  text-align: center;
  background: linear-gradient(135deg, #4a90e2, #5aa5f8);
  color: white;
  position: relative;
  overflow: hidden;
}

.logo-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shine 5s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

.login-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.login-subtitle {
  font-size: 14px;
  margin-top: 8px;
  opacity: 0.9;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

.header-wave {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.1)" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="rgba(255,255,255,0.1)" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: cover;
  z-index: 1;
}

/* 登录内容区 */
.login-content {
  padding: 25px 30px;
  position: relative;
}

/* 输入框样式 */
.form-group {
  margin-bottom: 20px;
  position: relative;
}

.phone-input {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.phone-input:focus-within {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.phone-prefix {
  padding: 0 15px;
  background: linear-gradient(to right, #f5f5f5, #f0f0f0);
  color: #555;
  height: 50px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e0e0e0;
  font-size: 15px;
  font-weight: 500;
}

.phone-prefix .arrow {
  font-size: 12px;
  margin-left: 5px;
  transition: transform 0.3s;
}

.phone-input:hover .arrow {
  transform: translateY(2px);
}

.phone-input input {
  flex: 1;
  padding: 14px 15px;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
}

.input-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4a90e2, #5aa5f8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease, opacity 0.3s;
  opacity: 0;
}

.code-input {
  display: flex;
  gap: 10px;
  position: relative;
}

.code-input input {
  flex: 1;
  padding: 14px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.code-input input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.send-code-btn {
  padding: 0 18px;
  background: linear-gradient(to right, #4a90e2, #5aa5f8);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  height: 50px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3);
}

.send-code-btn.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(74, 144, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
}

.send-code-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
}

.send-code-btn:disabled {
  background: linear-gradient(to right, #cccccc, #dddddd);
  color: #999;
  cursor: not-allowed;
}

.send-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 20px;
  color: #4CAF50;
  animation: sendEffect 1s ease-out;
}

@keyframes sendEffect {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.countdown {
  display: inline-block;
  animation: countdownPulse 1s infinite;
}

@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 图片验证码样式 */
.captcha-input {
  display: flex;
  gap: 10px;
  position: relative;
}

.captcha-input input {
  flex: 1;
  padding: 14px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.captcha-input input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.captcha-img {
  width: 120px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: block;
  margin-top: 8px;
}

.captcha-img:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #4a90e2, #5aa5f8);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
  z-index: 1;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(74, 144, 226, 0.6);
}

.login-btn:active {
  transform: translateY(0);
}

.btn-text {
  position: relative;
  z-index: 2;
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.6s;
}

.login-btn:hover .btn-shine {
  left: 100%;
}

.btn-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;
}

/* 其他登录方式 */
.other-login {
  margin-top: 25px;
}

.divider {
  position: relative;
  text-align: center;
  color: #aaa;
  font-size: 14px;
  margin: 25px 0;
}

.divider-text {
  position: relative;
  z-index: 1;
  padding: 0 15px;
  background: white;
}

.divider-line {
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
}

.divider-line.left {
  left: 0;
}

.divider-line.right {
  right: 0;
}

/* 第三方登录按钮 */
.third-party-login {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dingtalk-login-btn, .git-login-btn, .qq-login-btn {
  flex: 1;
  padding: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dingtalk-login-btn:hover, .git-login-btn:hover, .qq-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background: white;
}

.third-party-spinner {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  transition: transform 0.5s ease;
}

.dingtalk-login-btn:hover .third-party-spinner,
.git-login-btn:hover .third-party-spinner,
.qq-login-btn:hover .third-party-spinner {
  transform: rotate(360deg);
}

.third-party-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.third-party-text {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

/* 登录页脚 */
.login-footer {
  padding: 20px 30px;
  background: rgba(249, 249, 249, 0.9);
  border-top: 1px solid #eee;
  position: relative;
}

.footer-wave {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.9)" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="rgba(255,255,255,0.9)" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="rgba(255,255,255,0.9)"/></svg>');
  background-size: cover;
}

/* 复选框样式 */
.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
  border-color: #4a90e2;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 动画效果 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.bounce {
  animation: bounce 0.6s;
}

/* 装饰元素 */
.decor {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
  z-index: 0;
}

.decor-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #4a90e2, transparent 70%);
  top: -100px;
  right: -100px;
  animation: float 15s ease-in-out infinite;
}

.decor-2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #5aa5f8, transparent 70%);
  bottom: -50px;
  left: -50px;
  animation: float 12s ease-in-out infinite reverse;
}

.decor-3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #7fb8ff, transparent 70%);
  top: 50%;
  left: 30%;
  animation: float 10s ease-in-out infinite 2s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(20px, 20px); }
  50% { transform: translate(0, 40px); }
  75% { transform: translate(-20px, 20px); }
}

/* 角色选择弹窗 */
.role-selection-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.role-selection-content {
  background: white;
  border-radius: 12px;
  padding: 25px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.role-selection-content h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
}

.role-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.role-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.role-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.role-item.selected {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
}

.role-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.role-name {
  font-size: 14px;
  color: #333;
  text-align: center;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
}

.cancel-btn:hover {
  background: #eee;
}

.confirm-btn {
  background: #4a90e2;
  color: white;
  border: none;
}

.confirm-btn:hover:not(:disabled) {
  background: #3a80d2;
}

.confirm-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
    align-items: center;
  }

  .carousel-container {
    margin-right: 0;
    margin-bottom: 30px;
    width: 100%;
    max-height: 300px;
  }

  .login-wrapper {
    width: 100%;
  }

  .carousel-controls {
    padding: 0 10px;
  }

  .carousel-prev, .carousel-next {
    width: 35px;
    height: 35px;
  }

  .third-party-login {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .login-header {
    padding: 25px 20px 15px;
  }

  .login-content {
    padding: 20px;
  }

  .login-footer {
    padding: 15px 20px;
  }

  .phone-prefix {
    padding: 0 12px;
    font-size: 14px;
    height: 46px;
  }

  .phone-input input,
  .code-input input,
  .captcha-input input {
    padding: 13px 12px;
    font-size: 14px;
  }

  .send-code-btn {
    font-size: 13px;
    padding: 0 15px;
    height: 46px;
  }

  .login-btn {
    padding: 15px;
    font-size: 15px;
  }

  .login-box {
    border-radius: 12px;
  }

  .carousel-container {
    max-height: 250px;
  }

  .carousel-dots span {
    width: 8px;
    height: 8px;
  }

  .decor {
    display: none;
  }

  .third-party-login {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .login-box {
    border-radius: 10px;
  }

  .login-header h2 {
    font-size: 24px;
  }

  .third-party-text {
    font-size: 14px;
  }

  .carousel-controls {
    display: none;
  }

  .captcha-img {
    width: 100px;
    height: 46px;
  }
  
  .third-party-login {
    flex-direction: column;
  }

  .role-selection-content {
    padding: 20px;
  }

  .role-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>